<template>
	<view class="container">
		<view class="header-box">
			<image class="header-img" src="https://wechat-pictures-1301970825.file.myqcloud.com/yangji/icon_zhifuchenggong.png"></image>
			<view class="success-text">支付成功</view>
			<view class="success-price-text">支付金额：¥ {{info.uncollectedMoney}}</view>
		</view>
		<!-- 商品详情 - start -->
		<view class="item">
			<view class="item-top">
				<view class="top-status">支付订单编号：{{info.orderNo}}</view>
			</view>
			<view class="good" v-for="(item,index) in info.goodsList">
				<view class="good-content">
					<image class="good-img" :src="item.goodsImg"></image>
					<view class="good-info">
						<view class="good-title-box">
							<view class="good-title">{{item.goodsName}}</view>
						</view>
						<view class="good-price">
							<view class="good-danwei">单位：{{item.goodsUnit}}</view>
							<view class="good-price-value">单价：¥ {{item.saleUnitPrice}}</view>
						</view>
						<view class="good-num">商品数量：{{item.goodsNumber}}</view>
					</view>
				</view>
				<view class="good-z-price">
					<view class="goods-price-title">商品总价：</view>
					<view class="goods-price-price">{{item.salePrice}}元</view>
				</view>
			</view>
			<view class="show-more">查看更多</view>
		</view>
		<!-- 商品详情 - end -->
		<!-- 结果类目 -->
		<view class="res-box">
			<view class="res-item res-item-border">
				<view class="price-title">订单创建时间：</view>
				<view class="price-num">{{info.createTime}}</view>
			</view>
			<view class="res-item res-item-border">
				<view class="price-title">订单付款时间：</view>
				<view class="price-num">{{info.updateTime?info.updateTime:'-'}}</view>
			</view>
			<view class="res-item res-item-border">
				<view class="price-title">交易单号：</view>
				<view class="price-num-2">{{info.orderNo}}</view>
			</view>
			<view class="res-item">
				<view class="price-title">ERP订单号：</view>
				<view class="price-num">{{info.erpNo?info.erpNo:'-'}}</view>
			</view>
		</view>
		<view style="width: 750rpx;height: 120rpx;"></view>
		<!-- 底部菜单 -->
		<!-- <view class="bottom-box">
			<view class="button-text">立即支付</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNo:'',
				info:{
					goodsList: [
						{
							goodsImg: "",
							goodsName: "",
							goodsNo: '',
							goodsNumber: '',
							goodsUnit: "",
							paidinPrice: '',
							salePrice: '',
							saleUnitPrice: ''
						}
					],
				},
			}
		},
		onLoad(option) {
			if(option.orderNo){
				this.orderNo = option.orderNo
				this.getInfo()
			}else{
				uni.showToast({title:'参数错误',icon:"none",duration:2000})
				return
			}
		},
		methods: {
			// 获取订单详情
			getInfo(){
				let postData = {}
				postData.orderNo = this.orderNo
				this.$javaApiErp.doRequest("get",'/onlineOrder/customer/getPayOrdersDetail/'+this.orderNo,postData,'json').then(res=>{
					this.info=res.data.data
				})
			}
		}
	}
</script>

<style scoped>
	.container{
		background-color: #F1F1F1;
		width: 750rpx;
		min-height: 100vh;
	}
	.header-box{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 38rpx;
		line-height: 53rpx;
		background-color: #ffffff;
		color: #333333;
		padding: 30rpx;
	}
	.header-img{
		width: 302rpx;
		height: 190rpx;
	}
	.success-text{
		padding-top: 10rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #5CAE77;
		line-height: 48rpx;
		letter-spacing: 1px;
	}
	.success-price-text{
		padding-top: 20rpx;
		font-size: 44rpx;
		font-weight: 600;
		color: #FF9500;
		line-height: 48rpx;
		letter-spacing: 1px;
	}
	/* 商品 */
	.item{
		margin: 30rpx;
		box-sizing: border-box;
		padding: 0rpx 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
	}
	.item-top{
		color: #666666;
		font-size: 36rpx;
		line-height: 50rpx;
		border-bottom: 2upx solid #F1F1F1;
		padding: 30rpx 24rpx;
	}
	.good{
		border-bottom: 2upx solid #F1F1F1;
	}
	.good-content{
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding-top: 30upx;
	}
	.good-content .good-img{
		width: 160rpx;
		height: 160rpx;
		background: #D8D8D8;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}
	.good-info{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.good-title-box{
		display: flex;
		justify-content: space-between;
	}
	.good-title{
		font-size: 38rpx;
		color: #333333;
		font-weight: 400;
		line-height: 53rpx;
		overflow: hidden;
		max-width: 460rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}
	.good-info .good-price{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.good-danwei{
		font-size: 34rpx;
		color: #888888;
	}
	.good-price-value{
		font-size: 34rpx;
		color: #333333;
	}
	.good-num{
		text-align: end;
		font-size: 34rpx;
		color: #888888;
		padding-top: 20rpx;
	}
	.good-z-price{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 0;
	}
	.goods-price-title{
		font-size: 36rpx;
		color: #666666;
		line-height: 50rpx;
	}
	.goods-price-price{
		font-weight: 600;
		font-size: 40rpx;
		color: #5CAE77;
		line-height: 56rpx;
	}
	.show-more{
		padding: 30rpx 0;
		text-align: center;
		font-size: 40rpx;
		font-weight: 400;
		color: #5CAE77;
		line-height: 56rpx;
	}
	
	.res-box{
		background-color: #ffffff;
		margin: 0 30rpx 30rpx 30rpx;
		padding: 0 24rpx;
		border-radius: 8rpx;
	}
	.res-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24upx 0;
	}
	.res-item-border{
		border-bottom: 1rpx solid #D8D8D8;
	}
	.price-title{
		font-size: 36rpx;
		font-weight: 500;
		color: #666666;
		line-height: 50rpx;
	}
	.price-num{
		font-weight: 500;
		color: #333333;
		line-height: 62rpx;
		font-size: 36rpx;
	}
	.price-num-2{
		font-weight: 500;
		color: #333333;
		line-height: 62rpx;
		font-size: 32rpx;
	}
	.bottom-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 0 50upx 0;
	}
	.button-text{
		width: 686rpx;
		color: #ffffff;
		height: 98rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 44rpx;
		background-color: #5CAE77;
		border-radius: 14rpx;
	}
</style>